<template>
  <div>
    <DataGridTable
      v-loading="loading"
      :data="orderPaymentDetails"
      :show-summary="true"
      :show-page="false"
      :multi-select="false"
      summary-field=",paymentType,rate,money"
      size="mini"
      style="width: 100%"
    >
      <el-table-column v-if="editable" label="操作" width="100">
        <template slot="header" class="clearfix">
          <el-button
            icon="el-icon-plus"
            size="mini"
            type="primary"
            @click="addPayment"
            >添加</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="付款方式" prop="paymentType">
        <template slot-scope="scope">
          <el-select
            v-if="editable"
            v-model="scope.row.paymentType"
            placeholder="付款方式"
          >
            <el-option
              v-for="item in dicts.bus_payment_type"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            />
          </el-select>
          <template v-for="item in dicts.bus_payment_type" v-else>
            <span
              v-if="scope.row.paymentType === item.dictCode"
              :key="item.id"
              >{{ item.dictName }}</span
            >
          </template>
        </template>
      </el-table-column>
      <el-table-column label="比例" width="180" prop="rate">
        <template slot="header" slot-scope="scope">
          比例(%)<IconHelp display-content="比例相加不能超过100" />
        </template>
        <template slot-scope="scope">
          <el-input-number
            v-model.number="scope.row.rate"
            :disabled="!editable"
            :controls="false"
            :precision="2"
            :max="100"
            :min="0"
            size="mini"
            @change="rateChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="金额" width="180" prop="money">
        <template slot-scope="scope">
          <el-input-number
            v-model.number="scope.row.money"
            :disabled="true"
            :controls="false"
            :precision="2"
            :min="0"
            size="mini"
            style="width: 100%"
          />
        </template>
      </el-table-column>
      <el-table-column label="付款周期(天)" width="180">
        <template slot-scope="scope">
          <el-input-number
            v-model.number="scope.row.paymentPeriodDay"
            :disabled="!editable"
            :controls="false"
            :precision="0"
            :min="0"
            size="mini"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.rmk"
            :disabled="!editable"
            size="mini"
            style="width: 100%"
          />
        </template>
      </el-table-column>
    </DataGridTable>
  </div>
</template>

<script>
export default {
  dictTypes: ["bus_payment_type"],
  props: {
    orderPaymentDetails: {
      type: Array,
      required: true,
    },
    editable: {
      type: Boolean,
      default: false,
      required: false,
    },
    totalMoney: {
      type: Number,
      default: 0,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
    };
  },
  created() {
    console.log(this.orderPaymentDetails);
    this.orderPaymentDetails[0].paymentType = "";
  },
  methods: {
    rateChange(detailRow) {
      this.calPaymetDetail(this.totalMoney, detailRow);
    },
    calPaymetDetail(totalMoney, paymetRow) {
      paymetRow.money = (paymetRow.rate * totalMoney) / 100;
    },
    addPayment() {
      const tmpDetails = JSON.parse(JSON.stringify(this.orderPaymentDetails));
      const addRow = { rate: 100, paymentType: "", paymentPeriodDay: 30 };
      this.calPaymetDetail(this.totalMoney, addRow);
      tmpDetails.push(addRow);
      this.$emit("setDetails", tmpDetails);
    },
    handleCurrentChange(row, event, column) {
      console.log(row, event, column, event.currentTarget);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      if (row.receiveMoney > 0) {
        this.$notify({
          title: "已收款的不能删除",
          type: "warning",
          duration: 2500,
        });
        return;
      }
      const tmpDetails = JSON.parse(JSON.stringify(this.orderPaymentDetails));
      tmpDetails.splice(index, 1);
      this.$emit("setDetails", tmpDetails);
    },
  },
};
</script>
